<template>
  <div>
    <el-card>
      <el-button type="success" size="large" round @click="dialogVisible = true">添加班级</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="班级名称">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              {{ scope.row.title }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="人数">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <span style="margin-left: 10px">{{ scope.row.number }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <!-- <el-button type="primary" round @click="handleEdit(scope.row)" :disabled="scope.row.default">编辑</el-button> -->
            <el-popconfirm title="你确定要删除吗" confirm-button-text="确认" cancel-button-text="取消"
              @confirm="handleDelete(scope.row)">
              <template #reference>
                <el-button type="danger" round :disabled="scope.row.default">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="添加班级" style="border-radius: 20px; font-weight: bold;" :center="true">
      <el-form :model="addFrom">
        <el-form-item label="班级：" prop="title" label-width="80px">
          <el-input v-model="addFrom.title" autocomplete="on" />
        </el-form-item>
        <el-form-item label="导入：" prop='grade' label-width="80px">
          <el-upload ref="uploadRef" class="upload-demo" :auto-upload="false" :on-change="handleChange"
            v-model:file-list="addFrom.fileList">
            <el-button class="ml-3" type="success">
              选择文件
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addConfirm">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import ImportExcel from '../../utils/ImportExcel'
import axios from 'axios'
import { ElMessage } from 'element-plus';
import { ref, reactive, onMounted } from 'vue'
const dialogVisible = ref(false)
const tableData = ref([])
const addFrom = reactive({
  title: '',
  list: [],
  fileList: []
})
onMounted(() => {
  getTableData()
})
const getTableData = async () => {
  const res = await axios.get("/admin/classes")
  tableData.value = res.data
}
const handleChange = (event) => {
  addFrom.title = event.name.split(".")[0]
  ImportExcel(event.raw, (data) => {
    console.log('xlsx', data);
    addFrom.list = data
  })
}
const addConfirm = async () => {
  dialogVisible.value = false
  //将学生创建一个集合，字段为，名字，个人信息等
  //将班级创建一个集合，字段为，班级名，人数
  const classObj = await axios.post('/admin/classes', {
    title: addFrom.title,
    number: addFrom.list.length
  })
  await axios.post('/admin/students',{
    list:addFrom.list,
    class:classObj.data._id
  })
  // if (classObj.data._id) {
  // }else{
  //   ElMessage.error('该班级已存在')
  // }
  await getTableData()
  addFrom.title = ""
  addFrom.list = []
  addFrom.fileList = []
}
const handleDelete = async (item) => {
  await axios.delete(`/admin/classes/${item._id}`)
  await axios.delete(`/admin/students/${item._id}`)
  await getTableData()
}
</script>
<style scoped lang='scss'>
.el-card {
  // background-color: aqua;
  border-radius: 30px;

  :deep(.el-table .cell) {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
  }
}
</style>